What is dependency injection (DI) in AngularJS?

Question

Ravi Vishwakarma · Answer

Dependency Injection (DI) in AngularJS is a software design pattern that deals with how components get hold of their dependencies. It allows the creation of dependent objects outside of a class and provides those objects to a class in various ways. DI is integral to AngularJS as it helps manage the dependencies of various components like
services, controllers, and directives, making the code more
modular, maintainable, and testable.
Key Concepts of Dependency Injection in AngularJS
Injector: The injector is a service locator that looks up and instantiates the required dependencies.Provider: Configures how the dependency is created. AngularJS provides several built-in providers like
$provide.Service: The actual singleton objects or functions that provide a specific functionality.Dependency Annotation: The way dependencies are declared so that the injector knows what to inject.
and 
1. Inline Array Annotation
The most robust way to declare dependencies, especially when minification is involved.
var app = angular.module('myApp', []);
app.controller('MainController', ['$scope', 'MathService', function($scope, MathService) {
 $scope.result = MathService.add(5, 3);
}]);
app.service('MathService', function() {
 this.add = function(a, b) {
 return a + b;
 };
});
2. $inject Property Annotation
Another approach where dependencies are explicitly specified using the $inject property.
var app = angular.module('myApp', []);
var MainController = function($scope, MathService) {
 $scope.result = MathService.add(5, 3);
};
MainController.$inject = ['$scope', 'MathService'];
app.controller('MainController', MainController);
app.service('MathService', function() {
 this.add = function(a, b) {
 return a + b;
 };
});
How DI Works in AngularJS
Service Registration: Services are registered with the module using
service, factory, provider, etc.Dependency Declaration: Dependencies are declared in components (controllers,
services, directives, etc.) using one of the annotation methods.Injector Resolution: When AngularJS initializes the component, it uses the injector to find and inject the required dependencies based on the declared annotations.
Benefits of DI
Modularity: Encourages breaking down applications into smaller, manageable pieces.Testability: Makes it easier to mock dependencies during unit testing.Maintainability: Reduces tight coupling between components, making it easier to manage and update code.
and

forum

What is dependency injection (DI) in AngularJS?

Sandra Emily

1 Answers

How DI Works in AngularJS

Benefits of DI

Liked By